import { Icon } from '@iconify/vue'
import { ElButton, ElForm, ElFormItem, ElInput } from 'element-plus'
import { defineComponent, withKeys } from 'vue'

import { useLogin } from './hooks'
import styles from './index.module.css'

export default defineComponent({
  name: 'LoginView',
  setup() {
    const loginHook = useLogin()

    return {
      ...loginHook
    }
  },
  render() {
    return (
      <div class={styles.view}>
        <div class={styles.headerWrap}>
          <div class={styles.header}>
            <Icon class={styles.logoIcon} icon="@local:custom:logo" />
            <span class={styles.title}>{this.title}</span>
          </div>
          <div class={styles.desc}>基于 Element Plus 的后台管理系统</div>
        </div>
        <ElForm
          ref={(e: any) => (this.formRef = e)}
          model={this.formModel}
          rules={this.formRules}
          class={styles.loginForm}
          size="large"
        >
          <ElFormItem prop="userName">
            <ElInput
              v-model={this.formModel.userName}
              class={styles.userNameInput}
              placeholder="请输入账号"
            >
              {{
                prefix: () => <Icon icon="@local:icon-park-outline:user" />
              }}
            </ElInput>
          </ElFormItem>
          <ElFormItem prop="password">
            <ElInput
              v-model={this.formModel.password}
              class={styles.passwordInput}
              type="password"
              placeholder="请输入密码"
            >
              {{
                prefix: () => <Icon icon="@local:icon-park-outline:lock" />
              }}
            </ElInput>
          </ElFormItem>
          <ElFormItem prop="captchaValue">
            <ElInput
              v-model={this.formModel.captchaValue}
              class={styles.captchaInput}
              placeholder="请输入验证码"
              onKeydown={withKeys(this.handleSubmit, ['enter'])}
            >
              {{
                append: () => (
                  <img
                    src={this.captcha.imageBase64}
                    alt=""
                    style={{
                      cursor: 'pointer'
                    }}
                    onClick={this.handleGetCaptcha}
                  />
                )
              }}
            </ElInput>
          </ElFormItem>
          <ElFormItem>
            <ElButton
              class={styles.loginBtn}
              type="primary"
              loading={this.loading}
              onClick={this.handleSubmit}
            >
              登录
            </ElButton>
          </ElFormItem>
        </ElForm>
        <Icon class={styles.backgroundIcon} icon="@local:custom:background" />
      </div>
    )
  }
})
